<style lang="scss" scoped="">
	@import '../style.scss';


</style>
<template>
	<div class='my_card_outer' style="height:50vh">
		<div class='my_card' style="height:49vh;">
			<div class="my_card_title">
				<Icon type="md-stats" color='rgb(67,158,279)' class="my_card_icon" />租户各维度整体评分
			</div>
			<div style="height:44vh" ref="myEchart">
				fdsf

			</div>
		</div>

	</div>

</template>

<script>
	import echarts from 'echarts'
  import config from '../config.js'
	export default {
		name: 'diff_dim_score',

		mounted() {
			// this.initChart();

		},

		methods: {
			initChart(input_data) {

				var myChart = echarts.init(this.$refs.myEchart);
				var option = geOption()
				// 				var data = {
				// 					"max": {
				// 						"economy_dim_score": 79.8997792967509,
				// 						"reason_dim_score": 86.3285779322505,
				// 						"strategy_dim_score": 84.8999476347591,
				// 						"tech_dim_score": 82.7570762620044,
				// 						"util_dim_score": 80.6143159319366
				// 					},
				// 					"mean": {
				// 						"economy_dim_score": 67.22042296028992,
				// 						"reason_dim_score": 75.39870126867822,
				// 						"strategy_dim_score": 63.4534412092387,
				// 						"tech_dim_score": 64.97868845711436,
				// 						"util_dim_score": 73.75749486854241
				// 					},
				// 					"min": {
				// 						"economy_dim_score": 56.3290674513343,
				// 						"reason_dim_score": 63.6714309224556,
				// 						"strategy_dim_score": 45.100396214898,
				// 						"tech_dim_score": 40.1003256551448,
				// 						"util_dim_score": 64.102100254446
				// 					}
				// 				}
				let data = input_data.dim_general
				let order = ['util_dim_score', 'reason_dim_score', 'economy_dim_score', 'tech_dim_score', 'strategy_dim_score'] //['资源利用', '资源分配', '经济产值', '科技产值', '战略意义']
				let mean_data = [];
				let max_data = [];
				let min_data = [];
				for (var i in order) {
					mean_data.push(Math.round(data["mean"][order[i]]))
					min_data.push(Math.round(data["min"][order[i]]))
					max_data.push(Math.round(data["max"][order[i]]))
				}
				option.series[0].data = mean_data;
				option.series[1].data = min_data;
				option.series[2].data = max_data;
				myChart.setOption(option, true);
			}
		}
	}

	function geOption() {
		let hv = document.body.clientHeight / 100;
		var option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},

			grid: {
				show: false,
				left: '3%',
				right: '4%',
				bottom: '2%',
				top: '4%',
				containLabel: true
			},
			xAxis: [{
				type: 'value',
				splitLine: false
			}],
			yAxis: [{
				type: 'category',
				axisTick: {
					show: false
				},
				axisLabel: {
					color: "#FFF",
					fontSize: hv * 1.5
				},
				data: ['资源利用', '资源分配', '经济产值', '科技产值', '战略意义']
			}],
			series: [{
					name: '平均健康度',
					type: 'bar',
					label: {
						normal: {
							show: true,
							position: 'inside'
						}
					},
					itemStyle: {
						color: config.color[0]
					},
					data: [86, 67, 87, 87, 80]
				},
				{
					name: '最小健康度',
					type: 'bar',
					stack: '总量',
					label: {
						normal: {
							show: true
						}
					},
					itemStyle: {
						color: "rgb(67,158,279)"
					},
					data: [43, 57, 87, 34, 90]
				},
				{
					name: '最大健康度',
					type: 'bar',
					label: {
						normal: {
							show: true
						}
					},
					itemStyle: {
						color: config.color[1]
					},
					data: [43, 47, 87, 54, 90]
				}
			]
		};
		return option;
	}
</script>
